<!--更新工作站信息-->
<template>
    <el-dialog v-model="dialogVisible" width="40%" align-center title="修改工作站" :before-close="handleClosed">
        <el-form>
            <el-row>
                <el-row>
                    <el-form-item label="工作站编号" label-width="88">
                        <el-input :disabled="isRandom" style="width: 193px"
                                  v-model="queryData.workerNumbering"></el-input>
                        <el-tooltip
                                class="item"
                                effect="dark"
                                content="点击生成随机编号"
                                placement="top"
                        >
                            <el-switch v-model="isRandom">
                                <template #active-action>
                                    <span class="custom-active-action">T</span>
                                </template>
                                <template #inactive-action>
                                    <span class="custom-inactive-action">F</span>
                                </template>
                            </el-switch>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="工作站名称" label-width="115">
                        <el-input v-model="queryData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="工作站地点" label-width="88">
                        <el-input v-model="queryData.address"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" label-width="200">

                        <el-radio-group v-model="queryData.status">
                            <el-radio :value="1" border>启用</el-radio>
                            <el-radio :value="0" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-row>
            </el-row>
            <el-row>
                <el-form-item label="所在车间">
                    <el-select style="width: 150px" v-model="queryData.idWorkshop">
                        <template v-for="item in works">
                            <el-option :label="item.label" :value="item.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属工序" label-width="80">
                    <el-select style="width: 150px" v-model="queryData.idProgress">
                        <template v-for="item in pros">
                            <el-option :label="item.label" :value="item.value"></el-option>
                        </template>
                    </el-select>
                </el-form-item>

            </el-row>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="queryData.comments"></el-input>
            </el-form-item>
        </el-form>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="设备资源" name="tm">
                <div style="text-align: center">
                    <el-transfer
                            v-model="rightValue"
                            style="text-align: left; display: inline-block"
                            filterable
                            :titles="['设备库', '工作站-设备库']"
                            :button-texts="['归还', '加入']"
                            :format="{
                          noChecked: '${total}',
                          hasChecked: '${checked}/${total}',
                        }"
                            :data="toolData"
                            @change="handleTransferChanged"
                    >
                        <template #default="{ option }">
                            <span>{{ option.key }} - {{ option.label }}</span>
                        </template>

                    </el-transfer>
                </div>
            </el-tab-pane>
            <el-tab-pane label="人力资源" name="dept">
                <div style="text-align: center">
                    <el-row>
                        <el-col :span="3">
                            <span style="line-height: 30px;">部门名称</span>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="queryDeptData.deptId" filterable clearable>
                                <template v-for="item in depts">
                                    <el-option :label="item.label" :value="item.value"></el-option>
                                </template>
                            </el-select>
                        </el-col>
                        <el-col :span="2">
                            <span style="line-height: 30px">数量</span>
                        </el-col>
                        <el-col :span="4">
                            <el-input-number :min="0" :precision="0" v-model="queryDeptData.count"></el-input-number>
                        </el-col>
                        <el-col :span="5">
                            <el-button type="primary" @click="handleAddDeptResources" plain>添加</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="empData" height="288">
                        <el-table-column label="部门" prop="deptName"/>
                        <el-table-column label="人数">
                            <template #default="scope">
                                <el-input-number :min="0" :precision="0" v-model="scope.row.count"
                                                 :disabled="scope.row.disabled"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="text" @click="handleEditEmpl(scope.row)">{{ scope.row.disabled? '编辑':'保存' }}</el-button>
                                <el-button type="text" @click="handleDeleteEmpl(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="工装夹具" name="vs">
                <div style="text-align: center">
                    <el-row>
                        <el-col :span="3">
                            <span style="line-height: 30px;">工装夹具名称</span>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="queryVsData.toolId" filterable clearable>
                                <template v-for="item in vs">
                                    <el-option :label="item.label" :value="item.value"></el-option>
                                </template>
                            </el-select>
                        </el-col>
                        <el-col :span="2">
                            <span style="line-height: 30px">数量</span>
                        </el-col>
                        <el-col :span="4">
                            <el-input-number :min="0" :precision="0" v-model="queryVsData.count"></el-input-number>
                        </el-col>
                        <el-col :span="5">
                            <el-button type="primary" @click="handleAddVsResources" plain>添加</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="vsData" height="288">
                        <el-table-column label="工装名称" prop="toolName"/>
                        <el-table-column label="数量">
                            <template #default="scope">
                                <el-input-number :min="0" :precision="0" v-model="scope.row.count"
                                                 :disabled="scope.row.disabled"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="text" @click="handleEditVs(scope.row)">{{ scope.row.disabled? '编辑':'保存' }}</el-button>
                                <el-button type="text" @click="handleDeleteVs(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>

        <div style="text-align: center">
            <el-button type="primary" @click="handleEdit">保 存</el-button>
            <el-button @click="handleClosed">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import workAPI from "@/util/request-md/work/work.js";
import toolAPI from "@/util/request-md/tool/tool.js";
import rulesAPI from "@/util/request-md/rules/rules.js";
import deptAPI from "@/util/request-md/dept-resources/dept.js";
import vsAPI from "@/util/request-md/vs-resources/vs.js";

export default {
    name: "EditWokInfo",
    emits: ['callClosed', 'callEditSuccess'],
    props: ['visible', 'info', 'workshops', 'progress'],
    data() {
        return {
            dialogVisible: this.visible,
            isRandom: false,
            works: [],
            pros: [],
            activeName: 'tm',
            queryData: {
                workerNumbering: '',
                name: '',
                comments: '',
                address: '',
                status: 0,
                idWorkshop: '0',
                idWork: -1,
                idProgress: '0',
            },
            queryDeptData: {
                deptId: '请选择',
                count: 0,
                deptName: '',
            },
            queryVsData: {
                toolId: '请选择',
                count: 0,
                toolName: '',
            },
            toolData: [],//设备信息
            vsKey:'',
            rightValue: [],//右边数据
            empData: [{
                deptName: '部门1',
                count: 10,
                disabled: true
            }],
            vsData: [{
                toolName: '工装1',
                count: 10,
                disabled: true
            }],
            depts: [],
            vs:[]
        }
    },
    watch: {
        'visible'(val) {
            this.dialogVisible = val;
            this.rightValue = [];
            if (val) {
                this.works = this.workshops;
                this.pros = this.progress;
                this.queryData.workerNumbering = this.info.workerNumbering;
                this.queryData.name = this.info.name;
                this.queryData.comments = this.info.comments;
                this.queryData.address = this.info.address;
                this.queryData.idWork = this.info.idWork;
                this.queryData.status = this.info.status;
                this.queryData.idWorkshop = this.workshops[0].value;
                this.queryData.idProgress = this.progress[0].value;
                this.loadWorkTools();
            }
        },
        'isRandom'(val) {
            if (val) {
                rulesAPI.getEncoding({rulesName: "WORK_NO"}, res => {
                    this.queryData.workerNumbering = res.data;
                })
            } else {
                this.queryData.workerNumbering = '';
            }
        },
        'activeName'(val) {
            if (val === 'dept') {
                this.loadDeptData();
                this.loadWorkDeptData();
            }
            if (val === 'vs') {
                this.loadVsData();
                this.loadWorkVsData();
            }
        },

    },
    methods: {
        handleClosed() {
            this.activeName = 'tm';
            this.$emit('callClosed');
        },
        handleClick(data) {

        },
        handleEditEmpl(data) {
            if(!data.disabled){
                //更新数据
                deptAPI.updateResource({
                    idWork: this.queryData.idWork,
                    deptId: data.deptId,
                    count: data.count
                }, res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.loadWorkDeptData();
                    }
                })
            }else{
                data.disabled = false;
            }

        },
        handleEditVs(data) {
            if(!data.disabled){
                //更新数据
                vsAPI.updateResource({
                    idWork: this.queryData.idWork,
                    toolId: data.toolId,
                    count: data.count
                }, res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.loadWorkVsData();
                    }
                })
            }else{
                data.disabled = false;
            }

        },
        handleDeleteEmpl() {

        },
        handleDeleteVs() {

        },
        handleTransferChanged(value, direction, movedKeys) {
            console.log(value, direction, movedKeys)
        },
        //添加人力资源
        handleAddDeptResources() {
            deptAPI.addResource({
                idWork: this.queryData.idWork,
                deptId: this.queryDeptData.deptId,
                count: this.queryDeptData.count
            }, res => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.queryDeptData = {
                        deptId: 0,
                        count: 0,
                        deptName: '',
                    }
                    this.loadWorkDeptData();

                }
            })
        },
        handleAddVsResources() {
            vsAPI.addResource({
                idWork: this.queryData.idWork,
                toolId: this.queryVsData.toolId,
                count: this.queryVsData.count
            }, res => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.queryVsData = {
                        toolId: '请选择',
                        count: 0,
                        toolName: '',
                    }
                    this.loadWorkVsData();

                }
            })
        },
        handleEdit() {
            workAPI.updateWork(this.queryData, res => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.queryData = {
                        workerNumbering: '',
                        name: '',
                        comments: '',
                        address: '',
                        status: 0,
                        idWorkshop: '0',
                        idProgress: '0',
                    }

                    this.$emit('callEditSuccess');
                }
            })
            toolAPI.addTools({idWork: this.queryData.idWork, tools: this.rightValue}, res => {
                if (res.code === 200) {
                    this.$message({
                        type: 'success',
                        message: "夹具绑定成功"
                    })
                }
            })
        },
        loadToos() {
            toolAPI.getToolsByName({toolName: ''}, (res) => {
                if (res.code === 200) {
                    res.data.map(item => {
                        this.toolData.push({
                            key: item.toolId,
                            label: item.toolTypeName,
                        })
                    })
                }
            })
        },
        loadDeptData() {
            this.depts = [];
            deptAPI.getResourceByName({deptName: this.queryDeptData.deptName}, (res) => {
                if (res.code === 200) {
                    res.data.map(item => {
                        this.depts.push({
                            value: item.deptId,
                            label: item.deptName
                        })
                    })
                }
            })
        },
        loadVsData() {
            this.vs = [];
            vsAPI.getResourceByName({toolName: this.queryVsData.toolName}, (res) => {
                if (res.code === 200) {
                    res.data.map(item => {
                        this.vs.push({
                            value: item.toolId,
                            label: item.toolName
                        })
                    })
                }
            })
        },
        loadWorkTools() {
            this.rightValue=[];
            toolAPI.getWorkTools({idWork: this.queryData.idWork}, (res) => {
                if (res.code === 200) {
                    console.log(res.data)
                    res.data.map(item => {
                        this.rightValue.push(item.toolId);
                    })
                }
            })
        },
        loadWorkDeptData() {
            this.empData = [];
            deptAPI.getResourcesWorkId({idWork: this.queryData.idWork}, (res) => {
                if (res.code === 200) {
                    res.data.map(item => {
                        this.empData.push({
                            deptId: item.deptId,
                            count: item.count,
                            deptName: item.deptName,
                            disabled: true
                        });
                    })
                    //在depts中去寻找empData里具有相同deptId 的数据，如果有，就把他从depts中删除
                    this.depts.map((item, index) => {
                        this.empData.map(emp => {
                            if (item.value === emp.deptId) {
                                this.depts.splice(index, 1);
                            }
                        })
                    })
                }
            })
        },
        loadWorkVsData() {
            this.vsData = [];
            vsAPI.getResourcesWorkId({idWork: this.queryData.idWork}, (res) => {
                if (res.code === 200) {
                    res.data.map(item => {
                        this.vsData.push({
                            toolId: item.toolId,
                            count: item.count,
                            toolName: item.toolName,
                            disabled: true
                        });
                    })
                    this.vs.map((item, index) => {
                        this.vsData.map(v => {
                            if (item.value === v.toolId) {
                                this.vs.splice(index, 1);
                            }
                        })
                    })
                }
            })
        }
    },
    mounted() {
        this.loadToos();
        this.loadWorkDeptData();

    }
}
</script>

<style scoped>

</style>